<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body {
            /*视距：眼睛到屏幕的距离  视距越大效果越不明显，视距越小效果越明显*/
            perspective: 300px;
        }

        img {
            width: 150px;
            margin: 150px;
            transform-origin: top left;
            transition: all 3s;
        }

        img:hover {
            /*rotate  2D旋转*/
            /* transform: rotate(360deg); */

            /*rotateX 3D旋转*/
            transform: rotateX(360deg);
            /* transform: rotateY(360deg);
            transform: translateZ(100px); */
            /*不能超过视距，超过就看不到了*/
        }

        div {
            width: 200px;
            /* background-color: skyblue; */
            transform: translate3d(0px, 50px, 0px);
            transition: all 1s;
        }

        div:hover {
            transform: translate3d(0px, 0px, 0px);
        }
    </style>
</head>

<body>
    <img src="../assets/img/yinliu.jpg" />

    <div>transfrom -> translate3d</div>
</body>

</html>